<template>
	<view class="i-navBar" :style="{background: bgColor, paddingTop: navBarHeight + 'px'}">
		<view class="bar">
			<view class="back" v-if="back" @click="navBack">
				<image v-if="type === 'black'" src="../../static/images/back_icon.png" mode=""></image>
				<image v-else-if="type === 'goods'" src="../../static/images/goods_icon_back.png" mode=""></image>
				<image v-else src="../../static/images/left_white_icon.png" mode=""></image>

			</view>
			<text class="title" :style="{color}">{{title}}</text>
			<text class="r_title" :style="{color}" @click="handleClick">{{r_title}}</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		navTo,
		getSystemInfoSync
	} from '../../utils/common'
	import { defineProps, defineEmits, ref } from 'vue'

	const props = defineProps({
		bgColor: {
			type: String,
			default: '#fff'
		},
		type: {
			type: String,
			default: 'black'
		},
		color: {
			type: String,
			default: '#16161F'
		},
		back: {
			type: Boolean,
			default: true
		},
		title: {
			type: String,
			default: ''
		},
		r_title: {
			type: String,
			default: ''
		},
		wxTop: {
			type: Boolean,
			default: false
		}
	})

	const navBarHeight = ref(0)
	const { statusBarHeight } = getSystemInfoSync()
	navBarHeight.value = statusBarHeight
	// #ifdef  MP-WEIXIN

	const { height } = wx.getMenuButtonBoundingClientRect()
	navBarHeight.value = statusBarHeight + (props.wxTop ? height : 0)
	// #endif
   
	const navBack = () => {
		const pages = getCurrentPages()
		if (pages.length === 1) {
			uni.reLaunch({
				url: '/pages/user/user'
			})
			return;
		} 
		uni.navigateBack();
}

	const emit = defineEmits(['click'])
	const handleClick = () => {
		emit('click')
	}
</script>

<style lang="scss" scoped>
	.i-navBar {
		position: fixed;
		width: 100%;
		z-index: 100;
		height: 44px;

		.bar {
			height: 44px;
			@include flexRS;
			width: calc(100% - 48rpx);
			margin: 0 auto;
			position: relative;

			.back {
				width: 48rpx;
				height: 48rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		.title {
			@include dfont(32rpx);
			font-weight: 500;
			width: 180rpx;
			text-align: center;
			position: absolute;
			left: calc(50% - 90rpx);
			overflow: hidden;
		}

		.r_title {
			@include titlefont(26rpx);
			text-align: right;
		}
	}
</style>